import { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { Select, Space, Input } from 'antd'
import LoginAvatar from './LoginAvatar.jsx'
import { useNavigate } from 'react-router-dom'

function PageHeader(props) {
  const [searchOption, setSearchOption] = useState('issue')
  const options = [
    {
      value: 'issue',
      label: '问答',
    },
    {
      value: 'book',
      label: '书籍',
    },
  ]
  const navigate = useNavigate()
  const onChange  = (val) => {
    setSearchOption(val)
  }
  const  onSearch= (value) => {
    if (value) {
      // 搜索框有内容，需要进行搜索操作
      navigate('/searchPage', {
        state: {
          value,
          searchOption,
        },
      })
    } else {
      // 搜索框没有内容，跳转到首页
      navigate('/')
    }
  }
  const { Search } = Input
  return (
    <div className="headerContainer">
      {/* 头部 logo */}
      <div className="logoContainer">
        <div className="logo"></div>
      </div>
      {/* 头部导航 */}
      <nav className="navContainer">
        <NavLink to="/" className="navgation">
          问答
        </NavLink>
        <NavLink to="/books" className="navgation">
          书籍
        </NavLink>
        <NavLink to="/interviews" className="navgation">
          面试题
        </NavLink>
        <a href="https://duyi.ke.qq.com/" className="navgation" target="_blank" rel="noreferrer">
          视频教程
        </a>
      </nav>
      {/* 搜索框 */}
      <div className="searchContainer">
        <Space.Compact>
          <Select defaultValue="问答" options={options} onChange={onChange} />
          <Search placeholder="请输入要搜索的内容" allowClear enterButton="搜索" onSearch={onSearch} />
        </Space.Compact>
      </div>
      {/* 登录按钮 */}
      <div className="loginBtnContainer">
        <LoginAvatar loginHandle={props.loginHandle} />
      </div>
    </div>
  )
}

export default PageHeader
